<script setup lang="ts">

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";



const router = useRouter(); // 获取参数 用 useRouter





const topic =  ref({
  id: 0,
  content: '',
  choice: '',
  solution: "",
  analysis: '',
  experienceProvided: 0,
})


const tops = ref<{
  id: number,
  content: string,
  choice: string,
  solution: string,
  analysis: string,
  experienceProvided: number,
}[]>([])


onMounted(() => {
  myAxios.get('/user/topic/all')
      .then((res:any) => {
        tops.value = res.data.data
        topic.value = tops.value[0] ?? {
          id: 0,
          content: "",
          choice: "",
          solution: "",
          analysis: "",
          experienceProvided: 0,
        }
        console.log(res.data.data)
      })
      .catch(err => {
        console.log(err)
      })
})

const currentPage = ref(1);
const checked = ref('0');


const changePage = (page: number) => {
  text.value = '';
  currentPage.value = page;
  topic.value = tops.value[page - 1] ?? {
    id: 0,
    content: "",
    choice: "",
    solution: "",
    analysis: "",
    experienceProvided: 0,
  }
}




const count = ref(0)




const aaa = (choice: string, solution: string) => {
  if(choice === solution){
    count.value += 1
  }
}
const submitAnswer = () => {

  if(count.value === 0){

  }

  else{
    myAxios.get('/user/gain/exp', {
      params: {
        count: count.value,
      }
    }).then((res:any) => {
      console.log(res)

      router.push({
        path: '/result',
        query: {
          count:count.value
        }
      })
    })
  }
}


const text = ref('')
const time = ref( 60 * 60 * 1000);



</script>

<template>

  <div class="show-topic" id="show-topic">
    <div class="back-img"/>

    <van-count-down :time="time" format="倒计时：HH 时 mm 分 ss 秒" />

    <van-pagination
        v-model="currentPage"
        prev-text="上一题"
        next-text="下一题"
        items-per-page="1"
        :total-items="tops.length"
        :show-page-size="3"
        force-ellipses
        @change="changePage"
    />

    <div v-if="topic" style="height: 82.5%;">
      <p style="margin-top: 15%">{{topic.content}}</p>
      <div v-for="choice in topic.choice.split('\n')" class="choice" :key="choice">
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio :name="choice" @click="aaa(choice,topic.solution)">{{ choice }}</van-radio>
        </van-radio-group>
      </div>
      <button class="btn" @click="submitAnswer">确认提交</button>
    </div>

  </div>
</template>




<style scoped>

.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  left: 39%;
  background-color: #3cd5da;
}


.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  left: 39%;
  background-color: #3cd5da;
}

.choice {
  left: 5%;
  width: 80%;
  height: 50px;
  position: relative;
}

.back-img {
  position: absolute;

  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/题目背景.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
.show-topic {
  width: 100%;
  height: 100%;
  top: 0;

}


</style>